// 先加载config  在加载头部和尾部
require(['./config'], () => {
    require(['template', 'swiper', 'jquery', 'header', 'footer', 'banner', 'bootstrap', 'cart', 'logIn'], (template, Swiper) => {
            console.log("头部和尾部加载完毕")
            class circum {
                constructor() {
                    this.init()

                }

                init() {
                    this.hot()
                    this.popularity()
                    this.crention()
                    this.getList()
                    console.log(window.location)

                }

                // 热门周边
                hot() {
                        var swiper = new Swiper('.swiper-container', {
                            pagination: '.swiper-pagination',
                            paginationClickable: '.swiper-pagination',
                            nextButton: '.swiper-button-next',
                            prevButton: '.swiper-button-prev',
                            spaceBetween: 30
                        });
                    }
                    // 人气系列
                popularity() {
                        let popularityBtn = document.querySelectorAll(".popularity-btn ul li"),
                            popularityPicBox = document.querySelectorAll('.popularity-picBox'),
                            num = 0


                        for (var i = 0; i < popularityBtn.length; i++) {
                            popularityBtn[i].index = i;
                            popularityBtn[i].onmouseover = function() {
                                for (var j = 0; j < popularityPicBox.length; j++) {
                                    popularityPicBox[j].classList.remove("switchover");
                                    popularityBtn[j].style.border = "1px #b6a597 solid";
                                    popularityBtn[j].style.background = "none";
                                    popularityBtn[j].style.color = "#b6a597";
                                }

                                popularityPicBox[this.index].classList.add("switchover");
                                popularityBtn[this.index].style.border = "1px orange solid";
                                popularityBtn[this.index].style.background = "orange";
                                popularityBtn[this.index].style.color = "white";


                            }
                        }
                    }
                    // 共创系统
                crention() {
                        var swiper = new Swiper('.swiper-container', {
                            pagination: '.swiper-pagination',
                            slidesPerView: 3,
                            paginationClickable: true,
                            spaceBetween: 30
                        });
                    }
                    // 请求数据
                getList() {
                        // console.dir($)
                        // 发送请求获取数据
                        // console.log(window.location)
                        $.get('/lib/json/homePage.json', (res) => {
                            this.renderList(res)
                        })
                    }
                    // 渲染页面
                renderList(list) {
                    // template 第一个参数是模板id
                    //  第二个数据是传给模板的数据
                    const htmlString = template('homePage', { list: list })
                        // console.log(htmlString)
                    $("#homeListDIV").html(htmlString)
                }

            }
            new circum();
        }

    )
})